<template>
  <div class="signInBox">
    <div class="headBox">
      <img src="../assets/img/bgimgright12x.png" alt />
      <div class="headContent flex_sb">
        <div v-if="step>1" class="leftBox" @click="step-=1">上一步</div>
        <div></div>
        <router-link to="login" class="rightBox">登录</router-link>
      </div>
    </div>
    <!-- 步骤一账号注册 -->
    <div v-if="step==1" class="loginContent">
      <div class="loginTitle">新用户注册</div>
      <div class="formList flex">
        <input type="text" class="inputBox" v-model="userName" placeholder="请输入用户名" />
      </div>
      <div class="formList flex">
        <div class="leftHint">+86</div>
        <input type="text" class="inputBox" v-model="userPhone" placeholder="请输入手机号" />
      </div>
      <div class="formList flex">
        <input
          :type="see?'text':'password'"
          class="inputBox"
          v-model="passWord"
          placeholder="请输入密码"
        />
        <img v-if="!see" src="../assets/img/icon_Nodisplay02x.png" class="seeBtn" @click="see=!see" />
        <img v-else src="../assets/img/icon_display02x.png" alt class="seeBtn" @click="see=!see" />
      </div>
      <div class="formList flex">
        <input class="inputBox" v-model="authCode" placeholder="请输入验证码" @blur.native="sendMobile" />
        <div v-if="!countDown" class="authBtn" @click="getAuthCode">获取验证码</div>
        <div v-if="countDown" class="second">{{secondDown}}s</div>
      </div>
      <div class="handleBox flex_sb">
        <div class="goAuthCode">可发短信给新动力教练资格认证平台验证</div>
      </div>
      <div class="protocol flex">
        <check-icon :value.sync="checkProtocol"></check-icon>
        <router-link to class="protocolInfo">同意《用户使用协议》</router-link>
      </div>
      <div class="loginBtn">
        <img
          v-if="checkProtocol==true&&userPhone!==''&&userName!==''&&passWord!==''&&authCode!==''"
          src="../assets/img/icon_Signin_click02x.png"
          @click="step+=1"
        />
        <img v-else src="../assets/img/icon_Signin02x.png" alt />
      </div>
      <router-link to class="moreGoIn">收不到验证码</router-link>
    </div>
    <!-- 步骤二身份认证 -->
    <div v-if="step==2" class="loginContent">
      <div class="loginTitle">身份认证</div>
      <div class="idTitle">拍摄/上传您的二代身份证</div>
      <div class="IDCard">
        <div class="imgContent" @click.stop="showUploadClick">
          <img :src="imgSrcA" id="imgContentImg1" />
          <input
            :class="firstHint?'hide':''"
            type="file"
            class="file"
            id="imgUpFile1"
            @change="startReadA()"
          />
        </div>
        <div class="imgContent" @click.stop="showUploadClick">
          <img :src="imgSrcB" id="imgContentImg2" />
          <input
            :class="firstHint?'hide':''"
            type="file"
            class="file"
            id="imgUpFile2"
            @change="startReadB()"
          />
        </div>
      </div>
      <div class="loginBtn">
        <img
          v-if="imgSrcA!==require('../assets/img/uploadB.png')&&imgSrcB!==require('../assets/img/uploadA.png')"
          src="../assets/img/icon_Signin_click02x.png"
          @click="step+=1"
        />
        <img v-else src="../assets/img/icon_Signin02x.png" alt />
      </div>
    </div>
    <!-- 步骤三证书认证 -->
    <div v-if="step==3" class="loginContent">
      <div class="loginTitle">证书认证</div>
      <div v-for="(item,index) in certificate" class="certificateBox">
        <div class="head flex">
          <div class="headTime">{{item.time}}</div>
          <div class="headTitle">{{item.name}}</div>
        </div>
        <div class="CcieBox">
          <img v-for="(item2,index2) in item.imgList" :src="item2.url" alt />
        </div>
      </div>
      <img
        src="../assets/img/uploadeImg01.png"
        alt
        class="upCertificateImg"
        @click="certifiyDialog=true"
      />
      <divider>上传证书要求</divider>

      <div class="certificateHint">证书认证内容介绍提示信息</div>
      <div class="loginBtn">
        <img src="../assets/img/icon_Signin_click02x.png" @click="step+=1" />
        <div v-if="!certificate[0]" class="loginHint">跳过</div>
        <div v-if="certificate[0]" class="loginHint">下一步</div>
      </div>
    </div>
    <!-- 步骤三证书认证 -->
    <div v-if="step==4" class="loginContent">
      <div class="loginTitle">注册成功</div>
      <img src="../assets/img/Success.png" alt class="successImg" />
      <div class="successHint">注册成功内容</div>
      <router-link to="myInformation" class="goMyInfo">进入我的信息</router-link>
    </div>
    <!-- 图片上传提示弹框 -->
    <confirm v-model="showUpHint" :show-cancel-button="false" title="证件上传示例">
      <img src="../assets/img/uploadeDemo.png" alt class="exampleImg" />
    </confirm>
    <!-- 图片上传提示弹框 -->
    <confirm
      v-model="certifiyDialog"
      title="添加证书"
      @on-confirm="putInData"
      class="certifiyDialogBox"
    >
      <div class="certifiyBox">
        <upload
          upload-url="uploadUrl"
          :max="3"
          :images="certifiyForm.imgList"
          :show-header="false"
          size="small"
        ></upload>
        <group>
          <x-input title="证书名称" v-model="certifiyForm.name" placeholder="请输入证书名称"></x-input>
          <x-input title="证书编号" v-model="certifiyForm.number" placeholder="请输入证书编号"></x-input>
          <datetime
            title="颁发时间"
            class="dataBox"
            placeholder="请选择时间"
            v-model="certifiyForm.time"
            start-date="1970-01-01"
            end-date="2019-12-30"
            format="YYYY-MM-DD"
          ></datetime>
          <x-address
            title="颁发地点"
            v-model="certifiyForm.address"
            :list="addressData"
            @on-shadow-change="onShadowChange"
            placeholder="请选择地址"
            class="addressBox"
          ></x-address>
          <x-input title="颁发机构" v-model="certifiyForm.org" placeholder="请输入证书颁发机构"></x-input>
          <x-input title="证书说明" v-model="certifiyForm.remark" placeholder="请输入证书说明"></x-input>
        </group>
      </div>
    </confirm>
  </div>
</template>

<script>
import { CheckIcon, Confirm, Divider, Datetime, Group, XInput, XAddress, ChinaAddressV4Data } from 'vux'
import Upload from '../components/Uploader'
export default {
  components: {
    Upload,
    CheckIcon,
    Confirm,
    Divider,
    Datetime,
    Group,
    XInput,
    XAddress,
  },
  data() {
    return {
      step: 1,
      // 第一步数据
      userName: '',
      userPhone: '',
      passWord: '',
      authCode: '',
      checkProtocol: false,
      secondDown: 5,
      see: false,
      countDown: false,
      // 第二步数据
      showUpHint: false,
      firstHint: true, //是否为第一次提示
      imgSrcA: require('../assets/img/uploadB.png'),
      imgSrcB: require('../assets/img/uploadA.png'),
      // 第三步数据
      certificate: [],
      certifiyDialog: false,
      certifiyForm: {
        name: '',
        number: '',
        time: '',
        address: [],
        org: '',
        remark: '',
        imgList: [
          {
            url: require('../assets/img/authenticationA.png')
          },
          {
            url: require('../assets/img/authenticationB.png')
          },
        ],
      },
      sexList: [['男', '女', '不告诉你']],
      addressData: ChinaAddressV4Data,
    }
  },
  methods: {
    // 验证码倒计时
    getAuthCode() {
      //验证手机号码
      let mobile = this.userPhone
      //正则校验手机号是否合法
      if (!(/^1(3|4|5|7|8)\d{9}$/.test(mobile))) {
        this.$vux.alert.show({
          content: '手机号格式错误'
        })
        this.userPhone = ''
        return
      }

      // 发送验证码请求
      // this.$http.get('url').then(res => {
      // })

      // 显示倒计时
      this.countDown = true
      // 设置倒计时
      this.intervalBtn = setInterval(() => {
        if (this.secondDown <= 0) {
          this.countDown = false
          // 清除定时器
          clearInterval(this.intervalBtn)
          // 重置倒计时状态
          this.secondDown = 60;
        };
        // 倒计时
        this.secondDown--;
      }, 1000);
    },
    // 证件上传提示
    showUploadClick() {
      if (this.firstHint) {
        this.firstHint = false
        this.showUpHint = !this.showUpHint
      }
    },
    startReadA() {
      var fileDom = document.getElementById('imgUpFile1');
      var img = 'imgSrcA'
      if (fileDom && img) {
        this.fileHandle(fileDom, img);
      }
    },
    startReadB() {
      var fileDom = document.getElementById('imgUpFile2');
      var img = 'imgSrcB'
      if (fileDom && img) {
        this.fileHandle(fileDom, img);
      }
    },
    //文件处理
    fileHandle(fileDom, img) {
      var that = this
      //读取计算机文件
      var file = fileDom.files[0];
      console.log(file)
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onloadstart = function () {
        console.log('文件上传处理......')
      };
      //操作完成
      reader.onload = function (e) {
        //file 对象的属性
        if (img == 'imgSrcA') {
          that.imgSrcA = reader.result
        } else {
          that.imgSrcB = reader.result

        }
      };
    },
    // 选择地址
    onShadowChange(ids, names) {
      console.log(ids, names)
    },
    putInData() {
      this.certificate.push(this.certifiyForm)
    }
  }
}
</script>

<style lang="less" scoped>
.signInBox {
  .headBox {
    position: relative;
    padding: 20px;
    img {
      position: absolute;
      top: 0;
      right: 0;
      width: 180px;
    }
    .headContent {
      padding-top: 30px;
      font-size: 34px;
      .leftBox {
        color: #04aaff;
        font-size: 34px;
      }
      .rightBox {
        display: inline-block;
        color: #04aaff;
        border-radius: 40px;
        border: 2px solid #04aaff;
        text-align: center;
        line-height: 80px;
        height: 80px;
        width: 140px;
        background-color: #fff;
        z-index: 3;
      }
    }
  }
  .loginContent {
    padding: 40px 80px;
    .loginTitle {
      font-size: 50px;
      font-weight: bold;
      padding: 40px 0;
    }
    .formList {
      // padding: 40px 0;
      height: 100px;
      border-bottom: 2px solid #f0f0f0;
      .leftHint {
        background-color: #f6f6fe;
        color: #798696;
        padding: 2px 10px;
        margin-right: 20px;
        font-size: 32px;
        border-radius: 10px;
      }
      .inputBox {
        border: none;
        outline: none;
        font-size: 32px;
        flex-grow: 1;
        padding: 0 10px;
      }
      .seeBtn {
        width: 50px;
      }
      .authBtn {
        font-size: 30px;
        color: #04aaff;
      }
      .second {
        font-size: 30px;
        color: #04aaff;
      }
    }
    .handleBox {
      padding: 20px 0;
      font-size: 30px;
      color: #798696;
      .forget {
        color: #798696;
      }
    }
    .protocol {
      padding: 20px 0;
      /deep/.weui-icon-success:before {
        color: #04aaff;
      }
      .protocolInfo {
        font-size: 30px;
        color: #767676;
        margin-left: 10px;
      }
    }
    .loginBtn {
      margin-top: 40px;
      text-align: center;
      img {
        width: 120px;
      }
      .loginHint {
        margin-top: 10px;
        font-size: 30px;
        color: #767676;
      }
    }
    .moreGoIn {
      position: absolute;
      bottom: 50px;
      left: 0;
      right: 0;
      text-align: center;
      color: #798696;
      font-size: 36px;
    }
    .idTitle {
      font-size: 36px;
      text-align: center;
      // margin-bottom: 10px;
    }
    .IDCard {
      padding: 0 40px;
      padding-bottom: 0;
      text-align: center;

      .imgContent {
        position: relative;
        img {
          margin: 10px 0;
          width: 100%;
          height: 320px;
          box-shadow: 0 0 20px #eee;
        }
        .file {
          outline: none;
          position: absolute;
          opacity: 0;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
        }
        .file.hide {
          display: none;
        }
      }
    }
    .upCertificateImg {
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;
      margin-top: 20px;
    }
    .vux-divider {
      font-size: 36px;
    }
    .certificateHint {
      font-size: 30px;
      color: #767676;
      text-align: center;
    }
    .certificateBox {
      overflow: hidden;
      padding: 0 20px;
      .head {
        padding: 10px 0;
        font-size: 32px;
        .headTime {
          color: #5ea6f8;
          margin-right: 20px;
        }
        .headTitle {
        }
      }
      .CcieBox {
        width: 100%;
        background-color: #ecf6ff;
        padding: 20px;
        box-sizing: border-box;
        img {
          width: 30%;
          margin-right: 20px;
        }
      }
    }
    .successImg {
      width: 100%;
    }
    .successHint {
      font-size: 30px;
      color: #767676;
      text-align: center;
    }
    .goMyInfo {
      width: 80%;
      height: 80px;
      line-height: 80px;
      text-align: center;
      border-radius: 40px;
      color: #3f8ddb;
      border: 2px solid #3f8ddb;
      background-color: #fff;
      display: block;
      margin: 0 auto;
      margin-top: 50px;
    }
  }
  // 图片上传提示弹框
  .exampleImg {
    width: 100%;
  }
  // 证书认证弹框
  .certifiyBox {
    /deep/.addressBox {
      .vux-cell-placeholder {
        color: #757575;
      }
      .vux-cell-value {
        color: #757575;
      }
      .weui-cell__ft {
        padding-right: 0;
      }
      .weui-cell__ft:after {
        content: none;
      }
      .weui-label {
        padding-left: 20px;
      }
    }
    /deep/.dataBox {
      color: #999 !important;
      p {
        padding-left: 20px;
      }
      .vux-cell-placeholder {
        color: #757575;
      }
      .vux-cell-value {
        color: #757575;
      }
      .weui-cell__ft {
        padding-right: 0;
      }
      .weui-cell__ft:after {
        content: none;
      }
    }
    /deep/.weui-input {
      text-align: right;
    }
  }
  /deep/.weui-mask {
    z-index: 99;
  }
  .certifiyDialogBox {
    /deep/.weui-dialog {
      width: 90%;
      z-index: 100;

      .weui-dialog__bd {
        padding: 0;
      }
    }
  }
}
</style>